import React, {Component, PureComponent} from 'react';
import {ActivityIndicator} from 'react-native';
import {
  Assets,
  TabController,
  Colors,
  View,
  Text,
  Button,
  TabControllerItemProps,
} from 'react-native-ui-lib';
import {gestureHandlerRootHOC} from 'react-native-gesture-handler';
import _ from 'lodash';

const TABS = [
  'Home',
  'Posts',
  'Reviews',
  'Videos',
  'Photos',
  'Events',
  'About',
  'Community',
  'Groups',
  'Offers',
];

class Tabs extends Component {
  constructor(props) {
    super(props);
    this.state = {
      asCarousel: true,
      centerSelected: false,
      selectedIndex: 0,
      key: Date.now(),
    };
  }

  shouldComponentUpdate(np) {
    if (np.items.length != this.props.items.length) {
      return true;;
    } else {
      return false;;
    }
  }

  onChangeIndex = selectedIndex => {
    this.setState({selectedIndex});
  };

  renderTabPages(style, items) {
    const {asCarousel} = this.state;
    const Container = asCarousel ? TabController.PageCarousel : View;
    const containerProps = asCarousel ? {...style} : {flex: true};
    return (
      <Container {...containerProps} animated>
        {items.map((it, i) => {
          return (
            <TabController.TabPage index={it.key} key={it.key}>
              {it.render()}
            </TabController.TabPage>;
          );
        })}
      </Container>
    );
  }

  render() {
    const {key, selectedIndex, asCarousel, centerSelected} = this.state,
      {items, width, style} = this.props;
    return (
      <View flex>
        <TabController
          key={key}
          asCarousel={asCarousel}
          selectedIndex={selectedIndex}
          onChangeIndex={this.onChangeIndex}
          items={items}>
          <TabController.TabBar
            key={key}
            enableShadow={false}
            containerWidth={width}
            // uppercase
            containerStyle={{marginLeft: 20}}
            indicatorStyle={{
              backgroundColor: Colors.primaryColor,
              height: 3,
              borderRadius: 30,
            }}
            labelColor={Colors.secondaryColor}
            selectedLabelColor={Colors.primaryColor}
            // labelStyle={{fontSize: 20}}
            // iconColor={'green'}
            // selectedIconColor={'blue'}
            activeBackgroundColor={Colors.blue60}
            centerSelected={centerSelected}></TabController.TabBar>
          {this.renderTabPages(style, items)}
        </TabController>
      </View>
    );
  }
}
export default gestureHandlerRootHOC(Tabs);
